


//浮动： 脱离文档流

.red {
  background-color: red;
  width: 10vw;
  height: 10vh;
  clear: both; //兄弟间有人开启浮动，我收到影响了，要去除影响
}
.blue {
  background-color: blue;
  width: 15vw;
  height: 15vh;
  float: left; //开启浮动，飘起来
  // float: right;
}
.yellowgreen {
  background-color: yellowgreen;
  width: 20vw;
  height: 20vh;
  clear: both;//兄弟间有人开启浮动，我收到影响了，要去除影响
}


.con{
  border: 2px solid orange;
  &::after,&::before{  //在父元素中，子元素浮动，清除子元素浮动带来的影响
    content: "";
    display: block;
    clear: both;
  }
  .red1 {
    background-color: red;
    width: 10vw;
    height: 10vh;
    float: left;
    // float: right;
  }
  .blue1 {
    background-color: blue;
    width: 15vw;
    height: 15vh;
    float: right;
  }
}
.box{
  // margin-top: 400px;
  background-color: lavenderblush;
  width: 20vw;
  height: 20vh;
}
